<template>
	<div id="evaluate_index">
		<div class="title"> 用户评价</div>
		<div class="table-data">
			<el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
				<el-form-item label="评价结果：">
					<el-select v-model="formInline.evaluationresult" placeholder="全部" class="custom-select" @change="currentSel($event)">
						<el-option v-for="(item,index) in evaluateArr" :key="index" :label="item.name" :value="item.code" ></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="办理业务：">
					<el-select v-model="formInline.businesstype" placeholder="全部" class="custom-select">
						<el-option v-for="(item,index) in bussinesstypeArr" :key="index" :label="item.businessName" :value="item.id" ></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="评价窗口：">
					<el-select v-model="formInline.window" placeholder="全部" class="custom-select" style="margin-right:20px;">
						<el-option v-for="(item,index) in windowsArr" :key="index" :label="item.windowName" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button class="custom-btn" type="primary" size="medium" @click="submitForm('formInline')">查询</el-button>
					<el-button class="custom-btn" size="medium" @click="resetForm('formInline')">重置</el-button>
				</el-form-item>
			</el-form>
			<!-- tableData.slice((currentPage-1)*pageSize,currentPage*pageSize) -->
			<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"  class="e-table">
				<el-table-column  label="序号" width="90" align="center">
					<template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}} </span></template>
				</el-table-column>
				<el-table-column prop="name" label="评价结果" column-key="name" width="180" align="center">
					<template slot-scope="scope">
						<span :class="{red: scope.row.name === '不满意', blue: scope.row.name === '非常满意',yellow: scope.row.name === '一般'}">
							{{scope.row.name}}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="windowName" label="办理窗口" align="center"></el-table-column>
				<el-table-column prop="businessName" label="办理业务 " align="center"></el-table-column>
				<el-table-column prop="evaluationTime" label="评价时间" align="center"></el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<img style="cursor:pointer;" src="../assets/img/operation.png" alt="" @click="handleClick(scope.row.id)">
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
			 :page-size="pageSize" :page-sizes="[1, 2, 3, 4]" layout="prev, pager, next" :total="tableData.length">
			</el-pagination>
		</div>
	</div>
</template>
<script>
import { findEvalates,getEvalateList,getEvaluateCounts,searchEvaluate} from "../api/getData"
export default {
	name: "evaluate_index",
	data() {
		return {
			formInline: {
				evaluationresult: "",
				businesstype: "",
				window: ""
			},
			evaluateArr:[],
			bussinesstypeArr:[],
			windowsArr:[],
			currentPage: 1,
			pageSize: 10,
			totalPage:'',
			counts:0,
			tableData: [],
			selVal:''
		};
	},
	created() {
		// this.getTableDta()
	}, // 创建时
	beforeMount() {}, // 挂载之前
	mounted() {
		this.getFilter()
	}, // 挂载之后
	beforeUpdate() {}, // 数据更新时调用,在渲染之前
	updated() {}, // 数据更新后,渲染后调用(禁止)
	beforeDestroy() {}, // 实例销毁前调用,解绑中间层的数据传输
	destroyed() {}, // 实例销毁后调用
	beforeRouteEnter(to, from, next){
		next(vm=>{
			console.log(vm)
			// 每次进入路由执行
			// vm.getTableDta()
			vm.submitForm('formInline')
		})
	},
	methods: {
		currentSel(selVal){
			this.selVal = selVal;
		},
		// 查询
		submitForm(formName) {
			console.log(this.formInline)
			searchEvaluate({
				businesstypeid:this.formInline.businesstype,
				windowid:this.formInline.window,
				evaluationHierarchy:this.formInline.evaluationresult,
			}).then((res) =>{
				console.log(res)
				this.currentPage = 1
				this.tableData = res.data.data
			}).catch((error) =>{
				console.log(error)
			})
		},
		// 重置
		resetForm(formName) {
			this.formInline.evaluationresult = "";
			this.formInline.businesstype = "";
			this.formInline.window = "";
		},
		handleSizeChange(size) {
			console.log(this.pageSize)
			this.pageSize = size;
		},
		handleCurrentChange(currentPage) {
			this.currentPage = currentPage;
		},
		// 获取查询条件
		getFilter(){
			findEvalates({}).then((res) =>{
				console.log(res.data,"获取查询条件")
				res.data.data.Bussinesstype.map((item,index)=>{
					if(item.valid == false){
						item.businessName = item.businessName + ' (已取消) '
					}
					return item
				})
				res.data.data.widonws.map((w,i)=>{
					if(w.isstate == false){
						w.windowName = w.windowName + ' (已取消) '
					}
					return w
				})
				this.evaluateArr = res.data.data.Evaluate
				this.bussinesstypeArr = res.data.data.Bussinesstype
				this.windowsArr = res.data.data.widonws
			}).catch((error) =>{
				console.log(error)
			})
		},
		// 获取数据总数
		/* getListCounts(businesstype,windowid,evaluationresult,pagesize){
			getEvaluateCounts({
				businesstypeid:businesstype,
				windowid:windowid,
				evaluationHierarchy:evaluationresult,
				number:pagesize
			}).then((res) =>{
				console.log(res.data,"获取总页数")
				this.counts = res.data.data.counts
				this.totalPage = Math.round(res.data.counts/this.pageSize)
			}).catch((error) =>{
				console.log(error)
			})
		}, */
		// 获取列表数据
		getTableDta() {
			getEvalateList({
				businesstypeid:'',
				windowid:'',
				evaluationHierarchy:'',
				// page:this.currentPage,
				// number:this.pageSize
			}).then((res) => {
				console.log(res,"获取评价列表")
				if(res.data.code === 0){
					this.tableData = res.data.data;
				}else{
					this.tableData = []
				}
			}).catch((error) => {
				console.log(error)
			})
		},
		// 跳转详情页
		handleClick(id){
			console.log(id)
			this.$router.push({
				path:'/evaluate/evaluateDetail',
				query:{
					id:id
				}
			})
		}
	}
}
</script>
<style lang='scss'>
	#evaluate_index {
		.red {
			color: #FD3B38;
		}

		.blue {
			color: #328EF9
		}

		.yellow {
			color: #FB8F25;
		}

		.title {
			height: 64px;
			line-height: 64px;
			background: #fff;
			overflow: hidden;
			text-align: left;
			padding-left: 20px;
			color: #333437;
			font-size: 16px;
		}

		.table-data {
			width: 100%;
			height: 100%;
			margin-top: 20px;
			text-align: left;
			padding: 20px 30px;
			background: #fff;

			.custom-select {
				width: 128px;
				height: 32px;
				margin-right: 40px;
			}

			.e-table {
				width: 100%;
			}
		}

		.el-table th,
		.el-table tr thead {
			background: #fafafa;
			color: #333;
			font-weight: bold;
		}

		.el-pagination {
			text-align: center;
			margin-top: 40px;

			.el-pager li,
			.btn-next,
			.btn-prev {
				width: 32px;
				height: 32px;
				line-height: 32px;
				background: transparent;
				border: 1px solid #d9d9d9;
			}

			.el-pager li:not(.disabled).active {
				background: #328ef9;
			}
		}
	}
</style>
